<template>
	<view class="personal-data">
		<div :style="{
				height:`${statusBarHeight}px`,
				background:'#2f9aff'
			}"></div>
		<view :style="{height: `${topHeight}px`,paddingLeft:`${pagePadding}px`,paddingRight:`${pagePadding}px`}">
			<view class="personal-title">
				<i class="clearIcon" @click="goBack"></i>
				<text>个人资料</text>
			</view>
		</view>
		<view class="profile-container">
			<!-- 头像部分 -->
			<view class="profile-item" @click="handleUploadAvatar">
				<text class="item-label">头像</text>
				<view class="avatar-wrapper">
					<image class="avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill"></image>
				</view>
			</view>

			<!-- 姓名部分 -->
			<view class="profile-item" @click="handleNavigateTo('name')">
				<text class="item-label">姓名</text>
				<view class="item-content">
					<text>{{ userInfo.name || '16866886688' }}</text>
					<text class=" icon-right"></text>
				</view>
			</view>

			<!-- 手机号部分 -->
			<view class="profile-item" @click="handleNavigateTo('phone')">
				<text class="item-label">手机</text>
				<view class="item-content">
					<text>{{ userInfo.phone || 'admin' }}</text>
					<text class=" icon-right"></text>
				</view>
			</view>

			<!-- 性别部分 -->
			<view class="profile-item" @click="handleNavigateTo('gender')">
				<text class="item-label">性别</text>
				<view class="item-content">
					<picker @change="bindPickerChange" :value="sexIndex" :range="sexArray">
						<view class="uni-input disCenter" >{{sexArray[sexIndex]}}
						<text class=" icon-right"></text></view>
					</picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const statusBarHeight = ref(0); // 状态栏高度
	const topHeight = ref(0); // 胶囊高度
	const pagePadding = ref(0);
	const contHeight = ref(0); //内容高度
	const sexIndex = ref(0);
	const sexArray = ref([
		"男",
		"女"
	]);

	const defaultAvatar = '/static/images/my/my_top.png'

	const userInfo = ref({
		avatar: '',
		name: '16866886688',
		phone: 'admin',
		gender: 1
	})
	// 处理页面跳转
	const goBack = (type) => {
		uni.navigateBack()
	};
	const bindPickerChange = (e) => {
		console.log('picker发送选择改变，携带值为', e.detail.value)
		sexIndex.value = e.detail.value
	}
	// 处理头像上传
	const handleUploadAvatar = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				// 这里可以处理头像上传逻辑
				userInfo.value.avatar = res.tempFilePaths[0]
			}
		})
	}

	// 处理页面跳转
	const handleNavigateTo = (type) => {

	}

	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度

		const res = uni.getMenuButtonBoundingClientRect();
		pagePadding.value = systemInfo.screenWidth - res.right
		topHeight.value = res.height + (res.top - statusBarHeight.value) * 2
		contHeight.value = topHeight.value + statusBarHeight.value
	});
</script>

<style lang="scss" scoped>
	.personal-data {
		background: #F2F6F5;
		height: 100vh;
	}

	.personal-title {
		height: 100%;
		font-size: 38rpx;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.clearIcon {
			position: absolute;
			height: 100%;
			width: 60rpx;
			background: url(/static/images/my/ic_fanhui@2x.png)no-repeat center;
			background-size: 35%;
			left: 0;
			top: 0;
		}
	}

	.profile-container {
		background-color: #f5f5f5;
		padding-top: 20rpx;
	}

	.profile-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 2rpx;

		.item-label {
			font-size: 28rpx;
			color: #333;
		}

		.item-content {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #666;

			.icon-right {
				display: block;
				color: #999;
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
				background: url("/static/images/my/my_jiantou.png")no-repeat center;
				background-size: contain;
			}
		}

		.avatar-wrapper {
			display: flex;
			align-items: center;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}


		}
	}
	.disCenter{
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>